<template>
  <div>
    <el-card class="box-card" style="margin-bottom: 20px">
      <el-form>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="职务状态：">
              <el-select
                style="width: 70%"
                v-model="search.states"
                placeholder="请选择"
              >
                <el-option label="全部" value="1"> </el-option>
                <el-option label="正常" value="2"> </el-option>
                <el-option label="禁用" value="3"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="time_box">
              <el-select
                popper-class="select_class"
                clearable
                v-model="timeState"
                placeholder="请选择"
              >
                <el-option label="入职时间" value="1"> </el-option>
                <el-option label="离职时间" value="2"> </el-option>
              </el-select>
              <el-date-picker
                @change="time"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                range-separator="至"
                end-placeholder="结束日期"
                align="left"
                v-model="timeValue"
              >
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职务名称：">
              <el-input
                style="width: 70%"
                v-model="search.name"
                placeholder="请输入职务名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div style="display: flex">
              <el-button class="primary" type="primary" @click="primary"
                >查询</el-button
              >
              <el-button class="success" @click="clearFn">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button @click="add_cb" class="add_cb">新增</el-button>
      </div>

      <el-table
        :header-cell-style="{ background: '#E6EFFF' }"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="index" width="100" label="序号">
        </el-table-column>
        <el-table-column prop="name" label="职位名称" width="">
        </el-table-column>
        <el-table-column prop="rate" label="职位描述" width="">
          <template slot-scope="scope">
            {{ scope.row.type ? scope.row.type : "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="关联人数" width="">
        </el-table-column>
        <el-table-column prop="rate" label="添加时间" width="">
        </el-table-column>
        <el-table-column prop="store" label="职位状态" width="">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.store"
              active-value="1"
              inactive-value="2"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="add_cb('1')" size="small"
              >编辑</el-button
            >
            <el-button @click="del(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </el-card>
    <!-- 添加职务 -->
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
      @close="handleDialogClose"
    >
      <el-form :model="taskFrom" :rules="taskRules" ref="taskFrom">
        <el-form-item label="职务名称：" prop="name">
          <el-input v-model="taskFrom.name"></el-input>
        </el-form-item>
        <el-form-item label="职务描述：" prop="describe">
          <el-input
            type="textarea"
            :rows="2"
            maxlength="50"
            show-word-limit
            v-model="taskFrom.describe"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox-group v-model="checkList">
            <div
              class="width_100"
              v-for="(item, index) in treelist"
              :key="index"
            >
              <el-row>
                <el-col :span="24" class="title">
                  <el-checkbox
                    :label="item.id"
                    @change="checked => checkboxFun(checked, item)"
                    :data-id="item.id"
                    :checked="item.checked == 1 ? true : false"
                    >{{ item.title }}</el-checkbox
                  >
                  {{ item.title }}
                </el-col>
              </el-row>
              <el-row>
                <el-col
                  v-for="(items, key) in item.child"
                  :span="4"
                  class="content"
                  :key="key"
                  style="margin: 10px"
                >
                  <el-checkbox
                    :label="items.id"
                    :checked="items.checked == 1 ? true : false"
                    >{{ items.title }}</el-checkbox
                  >
                </el-col>
              </el-row>
            </div>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { testFun, tipsFun } from "../../util/request.js"
export default {
  data () {
    return {
      treelist: [
        {
          id: 367,
          parent_id: 0,
          title: "客户管理",
          icon: "",
          path: "",
          is_menu: 1,
          sort: 2,
          status: 1,
          is_wx_menu: null,
          checked: 1,
          child: [
            {
              id: 368,
              parent_id: 367,
              title: "公海客户",
              icon: "ghkh",
              path: "highSeasCustomList",
              is_menu: 1,
              sort: 1,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 369,
              parent_id: 367,
              title: "私海客户",
              icon: "shkh",
              path: "privateSeaList",
              is_menu: 1,
              sort: 2,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 375,
              parent_id: 367,
              title: "市场回访",
              icon: "schf",
              path: "kh_FollowupList",
              is_menu: 1,
              sort: 3,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 370,
              parent_id: 367,
              title: "拜访计划",
              icon: "bfjh",
              path: "visitList",
              is_menu: 1,
              sort: 4,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 371,
              parent_id: 367,
              title: "客户拜访",
              icon: "khbf",
              path: "kh_visitList",
              is_menu: 1,
              sort: 5,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 374,
              parent_id: 367,
              title: "银行代表",
              icon: "yhdb",
              path: "bank_peopleList",
              is_menu: 1,
              sort: 6,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 373,
              parent_id: 367,
              title: "银行拜访计划",
              icon: "yhbfjh",
              path: "bank_visitPlanList",
              is_menu: 1,
              sort: 7,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 372,
              parent_id: 367,
              title: "银行拜访",
              icon: "yhbf",
              path: "bank_visitList",
              is_menu: 1,
              sort: 8,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 420,
              parent_id: 367,
              title: "银行回访",
              icon: "yhhf",
              path: "bank_FollowupList",
              is_menu: 1,
              sort: 10,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            }
          ]
        }
      ],
      checkList: [],
      taskFrom: {
        name: "",
        describe: ""
      },
      taskRules: {
        name: [
          { required: true, message: "请输入职务名称：", trigger: "blur" }
        ],
        describe: [
          { required: true, message: "请输入职务描述", trigger: "blur" }
        ]
      },
      title: "",
      search: {},
      timeValue: "",
      timeState: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          time: "2023-10-28-9-00-00",
          type: "收银",
          rate: "0.22-0.6",
          store: "2"
        },
        {
          date: "2016-05-04",
          name: "睡觉",
          address: "上海市普陀区金沙江路 1517 弄",
          time: "2023-10-28-9-00-00",
          type: "",
          rate: "0.22-0.6",
          store: "1"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          time: "2023-10-28-9-00-00",
          type: "睡觉",
          rate: "0.22-0.6",
          store: "2"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          time: "2023-10-28-9-00-00",
          type: "打豆豆",
          rate: "0.22-0.6",
          store: "2"
        }
      ],
      centerDialogVisible: false
    }
  },
  methods: {
    checkboxFun (options_1, options_2) {
      console.log(options_1, options_2)
      if (options_1 == true) {
        var arr = []
        var that = this
        options_2.child.forEach(function (data) {
          arr.push(data.id)
        })
        this.checkList = Array.from(new Set(this.checkList.concat(arr)))
      } else {
        var arr = []
        options_2.child.forEach(function (data) {
          arr.push(data.id)
        })

        this.checkList.forEach((data_1, index_1) => {
          arr.forEach(data_2 => {
            if (data_1 == data_2) {
              delete this.checkList[index_1]
            }
          })
        })
        this.checkList = this.checkList.filter(s => {
          return s
        })
      }
    },
    // 添加职务
    add () {
      this.$refs.taskFrom.validate(valid => {
        if (valid) {
          console.log("选择的权限", this.checkList)
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    // 监听弹窗关闭
    handleDialogClose () {
      this.centerDialogVisible = false
      this.checkList = []
      this.$refs.taskFrom.resetFields()
    },
    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    // 筛选
    primary () {
      console.log(this.search)
    },
    // 添加/编辑
    add_cb (val) {
      this.centerDialogVisible = true
      if (val == 1) {
        this.title = "编辑职务"
      } else {
        this.title = "新增职务"
      }
    },
    del () {
      this.$confirm("确定删除所选组织层级？", "提示", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "error",
        center: true
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!"
        })
      })
    },
    // 查看
    see () {
      console.log("查询参数", this.search)
    },
    // 重置
    clearFn () {
      this.timeValue = ""
      this.search = {}
    },
    // 选择按什么时间搜索
    time () {
      if (this.timeState == 1) {
        delete this.search.add_time
        this.search.over_time = this.timeValue
      } else if (this.timeState == 2) {
        delete this.search.over_time
        this.search.add_time = this.timeValue
      }
    }
  }
}
</script>
<style scoped>
.pagination {
  margin: 20px;
  text-align: right;
}
.success {
  width: 106px;
  height: 35px;
  border-radius: 1px solid black;
}
.primary {
  width: 106px;
  height: 35px;
  color: #fff;
  background: #3f75ff;
  border-radius: 4px 4px 4px 4px;
}
.conent {
  align-items: center;
}
/deep/ .el-table__cell {
  text-align: center;
}
.centered-table th,
.centered-table td {
  text-align: center;
}

.add_cb {
  width: 67px;
  height: 29px;

  background: #3f75ff;
  color: #fff;
  border: 1px solid #3f75ff;
  border-radius: 4px;
}
.button {
  width: 106px;
  height: 31px;
  background: #3f75ff;
  border-radius: 4px 4px 4px 4px;
  color: #fff;
}
.time_box {
  display: flex;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
